<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ include file="../header.jsp" %>

	<link href="${pageContext.request.contextPath}/css/datepicker.css" rel="stylesheet"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/locales/bootstrap-datepicker.es.js"></script>
 
    <script>
        $(document).ready(function() {
          $("#botonBuscar").on('click', function(e) {
              e.preventDefault();
              // $('#customerDescription').remove();
              this.form.submit();
          });
          $('#dateFrom').datepicker({
              format: 'dd/mm/yyyy',
              language: 'es'
          });
          $('#dateTo').datepicker({
              format: 'dd/mm/yyyy',
              language: 'es'
          });
          
          <c:if test="${dateFrom != null}"> 
          $('#dateFrom').datepicker('setDate', new Date(${dateFrom.year}, 
                                                        ${dateFrom.month},
                                                        ${dateFrom.day}));
          </c:if>
          <c:if test="${dateTo != null}">
          $('#dateTo').datepicker('setDate', new Date(${dateTo.year}, 
                  									  ${dateTo.month},
                  									  ${dateTo.day}));
          </c:if>

        });
        
        function clearCustomer() {
        	
			$('#customerId').val('');
			$('#customerDescription').val('');
			$('#customer').html('');
            return false;
            
        }

        function cambiarPagina(pageOffset) {
            pageOffset = pageOffset >= 0 ? pageOffset : 0;
            $("#offset").val(pageOffset)
            $("#botonBuscar").click();
            return false;
        }

    </script>
    </head>
    <body>
        <div class="container">
        <div class="main-panel">
        <div class="panel panel-default">
        <div class="panel-heading"><h2>Actualizaciones por legajo</h2></div>
        <div class="panel-body">

        <form method="GET">
            <input type="hidden" name="_action" value="search" /> 
            <div class="form-group">
                <label for="customer">Asociado</label>
                <input type="hidden" id="customerId" name="idPersona" value="${param.idPersona}" />
                <input type="hidden" id="customerDescription" name="customerDescription" value="<c:out value='${param.customerDescription}' />" />
                <div class="row">
                <div class="col-xs-9">
                    <div class="input-group">
                        <c:if test="${param.customerDescription != null}">
                            <div class="form-control" id="customer"><c:out value="${param.customerDescription}" /></div>
                        </c:if>      
                        <c:if test="${param.customerDescription == null}">
                            <div class="form-control" id="customer"><span style="color:#aaa">Asociado</span></div>
                        </c:if>
                        
                        <span class="input-group-btn">
                            <a href="#" onclick="return clearCustomer()" class="btn btn-default" title="Borrar"><span class="glyphicon glyphicon-remove"></span></a>
                        </span>
                    </div>
                </div>
                <div class="col-xs-3">
                    <a data-toggle="modal" href="${pageContext.request.contextPath}/jsp/buscarCliente/index.jsp" data-target="#buscarClienteModal" class="btn btn-default">Buscar Asociado</a>
                </div>
                </div>
            </div>

            <div class="form-group">
                <label for="cajaId">Caja</label>
                <input id="cajaId" type="text" class="form-control" name="cajaId" placeholder="Caja" value="${param.cajaId}" />
            </div>
            
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-3">
                    <label for="dateFrom">Fecha desde</label>
                    <input type="text" class="form-control" id="dateFrom" name="dateFrom" style="max-width: 12em;">
                    </div>
                    <div class="col-xs-3">
                    <label for="dateTo">Fecha hasta</label>
                    <input type="text" class="form-control" id="dateTo" name="dateTo" style="max-width: 12em;">
                    </div>
                </div>
            </div>
 
            <div class="form-group">
                <input type="submit" id="botonBuscar" value="Buscar" class="btn btn-primary" />
            </div>

            <c:if test="${pager != null && pager.totalItems > 0}">

            <table class="table table-condensed table-bordered">
            <thead>
                    <tr>
                        <th>Id Persona</th>
                        <th>Razón social</th>
                        <th>CUIT</th>
                        <th>Tipología</th>
                        <th>Actualizaciones</th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach items="${documentVersions.customerFolders}" varStatus="i" var="customerFolder">
                	<c:forEach items="${customerFolder.documentTypeFolders}" var="docTypeFolder">
                		<tr>
                		<td><c:out value="${customerFolder.customer.idPersona}" /></td>
                        <td><c:out value="${customerFolder.customer.name}" /></td>
                        <td><c:out value="${customerFolder.customer.cuit}" /></td>
                        <td>${docTypeFolder.documentType.name}</td>
                        
                        <td>
                            <table class="table table-condensed table-bordered" style="margin: 0 0;">
                                <tr>
                                <th>Versión</th>
                                <th>Fecha digitalización</th>
                                <th>Vencimiento</th>
                                <th>Caja AdeA</th>
                                </tr>
                                <c:forEach items="${docTypeFolder.documents}" var="document">
                                <tr class="${document.lastVersion ? 'success' : '' }">
                                    <td style="text-align: right;"><c:out value="${document.realVersion}" /></td>
                                    <td><fmt:formatDate value="${document.createdDate}" pattern="dd/MM/yyyy" /></td>
                                    <td><fmt:formatDate value="${document.validTo}" pattern="dd/MM/yyyy" /></td>
                                    <td><c:out value="${document.box.cajaId}" /></td>
                                </tr>
                                </c:forEach>   
                            </table>
                        </td>
                        
                        </tr>
                	</c:forEach>
				</c:forEach>
                </tbody>
            </table>

            <input type="hidden" id="offset" name="offset" value="${offset}" />
            
            <jsp:include page="../pagination.jsp" >
    			<jsp:param name="pager" value="${pager}" />
    			<jsp:param name="changeOffsetFunction" value="cambiarPagina" />
			</jsp:include>
            
            </c:if>
            <c:if test="${pager != null && pager.totalItems == 0}">
                <div class="alert alert-warning">
                No se encontraron resultados
                </div>
            </c:if>
        </form>

        </div>
        </div>
        </div>
        </div>

        <div class="modal fade" id="buscarClienteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
    </body>
</html>
